<template>
  <div class="report-list">
    <div class="page-header">
      <div class="header-left">
        <h1>日报管理</h1>
        <p>记录和查看每日工作进展</p>
      </div>
      <div class="header-right">
        <el-button type="primary" @click="createReport">
          <el-icon><Plus /></el-icon>
          写日报
        </el-button>
      </div>
    </div>
    
    <!-- 筛选和搜索 -->
    <div class="filter-section">
      <div class="filter-left">
        <el-input
          v-model="searchQuery"
          placeholder="搜索日报内容"
          style="width: 300px"
          clearable
          @input="handleSearch"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
      </div>
      <div class="filter-right">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          @change="handleDateFilter"
          style="width: 240px"
        />
        
        <el-select
          v-model="userFilter"
          placeholder="选择用户"
          style="width: 150px"
          clearable
          @change="handleFilter"
        >
          <el-option
            v-for="user in users"
            :key="user.id"
            :label="user.username"
            :value="user.id"
          />
        </el-select>
        
        <el-select
          v-model="projectFilter"
          placeholder="选择项目"
          style="width: 150px"
          clearable
          @change="handleFilter"
        >
          <el-option
            v-for="project in projects"
            :key="project.id"
            :label="project.name"
            :value="project.id"
          />
        </el-select>
        
        <el-button @click="resetFilters">
          <el-icon><Refresh /></el-icon>
          重置
        </el-button>
        
        <el-button @click="exportReports">
          <el-icon><Download /></el-icon>
          导出
        </el-button>
      </div>
    </div>
    
    <!-- 统计信息 -->
    <div class="stats-section">
      <div class="stat-card">
        <div class="stat-number">{{ totalReports }}</div>
        <div class="stat-label">总日报数</div>
      </div>
      <div class="stat-card">
        <div class="stat-number">{{ todayReports }}</div>
        <div class="stat-label">今日日报</div>
      </div>
      <div class="stat-card">
        <div class="stat-number">{{ thisWeekReports }}</div>
        <div class="stat-label">本周日报</div>
      </div>
      <div class="stat-card">
        <div class="stat-number">{{ avgWorkHours }}</div>
        <div class="stat-label">平均工时</div>
      </div>
      <div class="stat-card">
        <div class="stat-number">{{ completionRate }}%</div>
        <div class="stat-label">完成率</div>
      </div>
    </div>
    
    <!-- 视图切换 -->
    <div class="view-controls">
      <el-radio-group v-model="viewMode" @change="handleViewChange">
        <el-radio-button label="list">列表视图</el-radio-button>
        <el-radio-button label="calendar">日历视图</el-radio-button>
        <el-radio-button label="chart">图表视图</el-radio-button>
      </el-radio-group>
    </div>
    
    <!-- 列表视图 -->
    <div class="reports-table" v-if="viewMode === 'list'" v-loading="loading">
      <el-table
        :data="filteredReports"
        style="width: 100%"
        @row-click="viewReport"
        row-class-name="report-row"
      >
        <el-table-column prop="date" label="日期" width="120">
          <template #default="{ row }">
            <span class="report-date">{{ formatDate(row.date) }}</span>
          </template>
        </el-table-column>
        
        <el-table-column prop="user" label="提交人" width="120">
          <template #default="{ row }">
            <div class="user-info">
              <el-avatar :size="24">
                {{ row.user.username.charAt(0).toUpperCase() }}
              </el-avatar>
              <span>{{ row.user.username }}</span>
            </div>
          </template>
        </el-table-column>
        
        <el-table-column prop="project" label="所属项目" width="150">
          <template #default="{ row }">
            <el-tag size="small" effect="plain" v-if="row.project">
              {{ row.project.name }}
            </el-tag>
            <span v-else class="text-muted">无项目</span>
          </template>
        </el-table-column>
        
        <el-table-column prop="workContent" label="工作内容" min-width="300">
          <template #default="{ row }">
            <div class="work-content">
              <div class="content-preview">{{ getContentPreview(row.workContent) }}</div>
              <div class="work-tags" v-if="row.tags && row.tags.length > 0">
                <el-tag
                  v-for="tag in row.tags.slice(0, 3)"
                  :key="tag"
                  size="small"
                  effect="plain"
                >
                  {{ tag }}
                </el-tag>
                <span v-if="row.tags.length > 3" class="more-tags">
                  +{{ row.tags.length - 3 }}
                </span>
              </div>
            </div>
          </template>
        </el-table-column>
        
        <el-table-column prop="workHours" label="工作时长" width="100">
          <template #default="{ row }">
            <span class="work-hours">{{ row.workHours }}h</span>
          </template>
        </el-table-column>
        
        <el-table-column prop="progress" label="进度" width="120">
          <template #default="{ row }">
            <div class="progress-info">
              <el-progress
                :percentage="row.progress"
                :stroke-width="6"
                :show-text="false"
                :color="getProgressColor(row.progress)"
              />
              <span class="progress-text">{{ row.progress }}%</span>
            </div>
          </template>
        </el-table-column>
        
        <el-table-column prop="mood" label="心情" width="80">
          <template #default="{ row }">
            <span class="mood-emoji">{{ getMoodEmoji(row.mood) }}</span>
          </template>
        </el-table-column>
        
        <el-table-column prop="createdAt" label="提交时间" width="120">
          <template #default="{ row }">
            {{ formatDateTime(row.createdAt) }}
          </template>
        </el-table-column>
        
        <el-table-column label="操作" width="120" fixed="right">
          <template #default="{ row }">
            <el-dropdown @command="handleCommand">
              <el-button text>
                <el-icon><MoreFilled /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item :command="{ action: 'view', id: row.id }">
                    <el-icon><View /></el-icon>
                    查看详情
                  </el-dropdown-item>
                  <el-dropdown-item
                    :command="{ action: 'edit', id: row.id }"
                    v-if="canEdit()"
                  >
                    <el-icon><Edit /></el-icon>
                    编辑日报
                  </el-dropdown-item>
                  <el-dropdown-item :command="{ action: 'copy', id: row.id }">
                    <el-icon><CopyDocument /></el-icon>
                    复制日报
                  </el-dropdown-item>
                  <el-dropdown-item :command="{ action: 'export', id: row.id }">
                    <el-icon><Download /></el-icon>
                    导出日报
                  </el-dropdown-item>
                  <el-dropdown-item
                    :command="{ action: 'delete', id: row.id }"
                    v-if="canDelete()"
                    divided
                  >
                    <el-icon><Delete /></el-icon>
                    删除日报
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
    </div>
    
    <!-- 日历视图 -->
    <div class="calendar-view" v-if="viewMode === 'calendar'">
      <el-calendar v-model="calendarDate">
        <template #date-cell="{ data }">
          <div class="calendar-cell">
            <div class="date-number">{{ data.day.split('-').slice(-1)[0] }}</div>
            <div class="reports-indicator" v-if="getDateReports(data.day).length > 0">
              <div
                v-for="report in getDateReports(data.day).slice(0, 2)"
                :key="report.id"
                class="report-dot"
                :title="`${report.user.username}: ${getContentPreview(report.workContent)}`"
              ></div>
              <div
                v-if="getDateReports(data.day).length > 2"
                class="more-reports"
              >
                +{{ getDateReports(data.day).length - 2 }}
              </div>
            </div>
          </div>
        </template>
      </el-calendar>
    </div>
    
    <!-- 图表视图 -->
    <div class="chart-view" v-if="viewMode === 'chart'">
      <div class="charts-grid">
        <div class="chart-card">
          <div class="chart-header">
            <h4>工作时长趋势</h4>
          </div>
          <div class="chart-content" ref="workHoursChart"></div>
        </div>
        
        <div class="chart-card">
          <div class="chart-header">
            <h4>项目工时分布</h4>
          </div>
          <div class="chart-content" ref="projectHoursChart"></div>
        </div>
        
        <div class="chart-card">
          <div class="chart-header">
            <h4>完成进度统计</h4>
          </div>
          <div class="chart-content" ref="progressChart"></div>
        </div>
        
        <div class="chart-card">
          <div class="chart-header">
            <h4>心情统计</h4>
          </div>
          <div class="chart-content" ref="moodChart"></div>
        </div>
      </div>
    </div>
    
    <!-- 空状态 -->
    <div class="empty-state" v-if="!loading && filteredReports.length === 0 && viewMode === 'list'">
      <el-empty description="暂无日报数据">
        <el-button type="primary" @click="createReport">
          写第一份日报
        </el-button>
      </el-empty>
    </div>
    
    <!-- 分页 -->
    <div class="pagination" v-if="filteredReports.length > 0 && viewMode === 'list'">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'

import { ElMessage, ElMessageBox } from 'element-plus'
import dayjs from 'dayjs'
import * as echarts from 'echarts'
import {
  Plus,
  Search,
  Refresh,
  Download,
  MoreFilled,
  View,
  Edit,
  Delete,
  CopyDocument
} from '@element-plus/icons-vue'

const router = useRouter()


const loading = ref(false)
const searchQuery = ref('')
const dateRange = ref<[string, string] | null>(null)
const userFilter = ref('')
const projectFilter = ref('')
const viewMode = ref('list')
const calendarDate = ref(new Date())
const currentPage = ref(1)
const pageSize = ref(20)
const total = ref(0)

// 图表引用
const workHoursChart = ref()
const projectHoursChart = ref()
const progressChart = ref()
const moodChart = ref()

// 用户列表
const users = ref([
  { id: 1, username: '张三' },
  { id: 2, username: '李四' },
  { id: 3, username: '王五' },
  { id: 4, username: '赵六' }
])

// 项目列表
const projects = ref([
  { id: 1, name: '项目管理系统' },
  { id: 2, name: '电商平台' },
  { id: 3, name: '移动应用开发' }
])

// 生成当前月份的模拟日报数据
const generateCurrentMonthReports = () => {
  const currentDate = dayjs()
  const reports = []
  
  // 生成本月的一些日报数据
  for (let i = 1; i <= Math.min(currentDate.date(), 15); i++) {
    const reportDate = currentDate.date(i).toDate()
    const userId = (i % 4) + 1
    const projectId = (i % 3) + 1
    
    const users = [
      { id: 1, username: '张三' },
      { id: 2, username: '李四' },
      { id: 3, username: '王五' },
      { id: 4, username: '赵六' }
    ]
    
    const projects = [
      { id: 1, name: '项目管理系统' },
      { id: 2, name: '电商平台' },
      { id: 3, name: '移动应用开发' }
    ]
    
    const workContents = [
      '完成了用户登录功能的开发，包括前端页面设计和后端API接口实现。修复了登录页面样式问题，优化了用户体验。',
      '进行了数据库设计优化，提升了查询性能。参与了项目需求评审会议，确定了下一阶段的开发计划。',
      '完成了商品管理模块的测试用例编写，发现并修复了3个Bug。协助新同事熟悉项目代码结构。',
      '研究了新的前端框架技术，编写了技术调研报告。开始着手重构项目的组件库。',
      '完成了移动端UI设计稿的实现，适配了不同屏幕尺寸。解决了iOS平台的兼容性问题。',
      '参加了技术分享会，学习了微服务架构的最佳实践。整理了学习笔记并分享给团队。'
    ]
    
    const moods = ['excited', 'happy', 'normal', 'tired']
    const tagsList = [
      ['开发', '前端', '后端', 'Bug修复'],
      ['数据库', '优化', '会议'],
      ['测试', 'Bug修复', '代码审查'],
      ['技术调研', '重构', '组件库'],
      ['移动端', 'UI', '兼容性'],
      ['学习', '分享', '微服务']
    ]
    
    reports.push({
      id: i,
      date: reportDate,
      user: users[userId - 1],
      project: projects[projectId - 1],
      workContent: workContents[i % workContents.length],
      workHours: 6 + Math.random() * 3, // 6-9小时
      progress: 60 + Math.random() * 40, // 60-100%
      mood: moods[i % moods.length],
      tags: tagsList[i % tagsList.length],
      createdAt: new Date(reportDate.getTime() + 18 * 60 * 60 * 1000) // 18:00
    })
  }
  
  return reports
}

// 模拟日报数据
const reports = ref(generateCurrentMonthReports())

// 过滤后的日报列表
const filteredReports = computed(() => {
  let result = reports.value
  
  // 搜索过滤
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    result = result.filter(report => 
      report.workContent.toLowerCase().includes(query) ||
      (report.tags && report.tags.some(tag => tag.toLowerCase().includes(query)))
    )
  }
  
  // 日期范围过滤
  if (dateRange.value && dateRange.value.length === 2) {
    const [startDate, endDate] = dateRange.value
    result = result.filter(report => {
      const reportDate = dayjs(report.date).format('YYYY-MM-DD')
      return reportDate >= startDate && reportDate <= endDate
    })
  }
  
  // 用户过滤
  if (userFilter.value) {
    result = result.filter(report => report.user.id === Number(userFilter.value))
  }
  
  // 项目过滤
  if (projectFilter.value) {
    result = result.filter(report => report.project?.id === Number(projectFilter.value))
  }
  
  total.value = result.length
  
  // 分页
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return result.slice(start, end)
})

// 统计数据
const totalReports = computed(() => reports.value.length)
const todayReports = computed(() => {
  const today = dayjs().format('YYYY-MM-DD')
  return reports.value.filter(report => 
    dayjs(report.date).format('YYYY-MM-DD') === today
  ).length
})
const thisWeekReports = computed(() => {
  const weekStart = dayjs().startOf('week')
  const weekEnd = dayjs().endOf('week')
  return reports.value.filter(report => {
    const reportDate = dayjs(report.date)
    return reportDate.isAfter(weekStart) && reportDate.isBefore(weekEnd)
  }).length
})
const avgWorkHours = computed(() => {
  if (reports.value.length === 0) return 0
  const totalHours = reports.value.reduce((sum, report) => sum + report.workHours, 0)
  return (totalHours / reports.value.length).toFixed(1)
})
const completionRate = computed(() => {
  if (reports.value.length === 0) return 0
  const totalProgress = reports.value.reduce((sum, report) => sum + report.progress, 0)
  return Math.round(totalProgress / reports.value.length)
})

// 获取内容预览
const getContentPreview = (content: string) => {
  return content.length > 50 ? content.substring(0, 50) + '...' : content
}

// 获取进度颜色
const getProgressColor = (progress: number) => {
  if (progress >= 80) return '#67c23a'
  if (progress >= 60) return '#e6a23c'
  return '#f56c6c'
}

// 获取心情表情
const getMoodEmoji = (mood: string) => {
  const emojis: Record<string, string> = {
    'excited': '😄',
    'happy': '😊',
    'normal': '😐',
    'tired': '😴',
    'sad': '😢'
  }
  return emojis[mood] || '😐'
}

// 格式化日期
const formatDate = (date: Date) => {
  return dayjs(date).format('MM-DD')
}

const formatDateTime = (date: Date) => {
  return dayjs(date).format('MM-DD HH:mm')
}

// 获取指定日期的日报
const getDateReports = (date: string) => {
  return reports.value.filter(report => 
    dayjs(report.date).format('YYYY-MM-DD') === date
  )
}

// 检查是否可以编辑
const canEdit = () => {
  // 这里应该检查当前用户是否是日报作者或有管理权限
  return true
}

// 检查是否可以删除
const canDelete = () => {
  // 这里应该检查当前用户是否是日报作者或有管理权限
  return true
}

// 搜索处理
const handleSearch = () => {
  currentPage.value = 1
}

// 日期筛选处理
const handleDateFilter = () => {
  currentPage.value = 1
}

// 筛选处理
const handleFilter = () => {
  currentPage.value = 1
}

// 重置筛选
const resetFilters = () => {
  searchQuery.value = ''
  dateRange.value = null
  userFilter.value = ''
  projectFilter.value = ''
  currentPage.value = 1
}

// 视图切换处理
const handleViewChange = (mode: string | number | boolean | undefined) => {
  if (mode === 'chart') {
    nextTick(() => {
      initCharts()
    })
  }
}

// 分页处理
const handleSizeChange = (size: number) => {
  pageSize.value = size
  currentPage.value = 1
}

const handleCurrentChange = (page: number) => {
  currentPage.value = page
}

// 操作处理
const handleCommand = (command: { action: string; id: number }) => {
  const { action, id } = command
  
  switch (action) {
    case 'view':
      viewReportById(id)
      break
    case 'edit':
      editReport(id)
      break
    case 'copy':
      copyReport(id)
      break
    case 'export':
      exportReport()
      break
    case 'delete':
      deleteReport(id)
      break
  }
}

// 查看日报
const viewReport = (report: any) => {
  router.push(`/reports/${report.id}`)
}

const viewReportById = (id: number) => {
  router.push(`/reports/${id}`)
}

// 编辑日报
const editReport = (id: number) => {
  router.push(`/reports/${id}/edit`)
}

// 复制日报
const copyReport = (id: number) => {
  const report = reports.value.find(r => r.id === id)
  if (report) {
    // 这里应该复制日报内容到新建页面
    router.push('/reports/create')
    ElMessage.success('日报内容已复制，请修改后提交')
  }
}

// 导出单个日报
const exportReport = () => {
  ElMessage.info('日报导出功能开发中...')
}

// 导出所有日报
const exportReports = () => {
  ElMessage.info('批量导出功能开发中...')
}

// 删除日报
const deleteReport = async (id: number) => {
  try {
    await ElMessageBox.confirm(
      '确定要删除这份日报吗？删除后无法恢复。',
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    reports.value = reports.value.filter(r => r.id !== id)
    ElMessage.success('日报删除成功')
  } catch {
    // 用户取消删除
  }
}

// 创建日报
const createReport = () => {
  router.push('/reports/create')
}

// 初始化图表
const initCharts = () => {
  initWorkHoursChart()
  initProjectHoursChart()
  initProgressChart()
  initMoodChart()
}

// 工作时长趋势图
const initWorkHoursChart = () => {
  if (!workHoursChart.value) return
  
  const chart = echarts.init(workHoursChart.value)
  const dates = reports.value.map(r => dayjs(r.date).format('MM-DD')).reverse()
  const hours = reports.value.map(r => r.workHours).reverse()
  
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: dates
    },
    yAxis: {
      type: 'value',
      name: '工时(h)'
    },
    series: [{
      data: hours,
      type: 'line',
      smooth: true,
      itemStyle: {
        color: '#409eff'
      }
    }]
  }
  
  chart.setOption(option)
}

// 项目工时分布图
const initProjectHoursChart = () => {
  if (!projectHoursChart.value) return
  
  const chart = echarts.init(projectHoursChart.value)
  const projectHours: Record<string, number> = {}
  
  reports.value.forEach(report => {
    const projectName = report.project?.name || '其他'
    projectHours[projectName] = (projectHours[projectName] || 0) + report.workHours
  })
  
  const data = Object.entries(projectHours).map(([name, value]) => ({ name, value }))
  
  const option = {
    tooltip: {
      trigger: 'item'
    },
    series: [{
      type: 'pie',
      radius: '60%',
      data,
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }]
  }
  
  chart.setOption(option)
}

// 完成进度统计图
const initProgressChart = () => {
  if (!progressChart.value) return
  
  const chart = echarts.init(progressChart.value)
  const progressRanges = {
    '0-20%': 0,
    '21-40%': 0,
    '41-60%': 0,
    '61-80%': 0,
    '81-100%': 0
  }
  
  reports.value.forEach(report => {
    const progress = report.progress
    if (progress <= 20) progressRanges['0-20%']++
    else if (progress <= 40) progressRanges['21-40%']++
    else if (progress <= 60) progressRanges['41-60%']++
    else if (progress <= 80) progressRanges['61-80%']++
    else progressRanges['81-100%']++
  })
  
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    xAxis: {
      type: 'category',
      data: Object.keys(progressRanges)
    },
    yAxis: {
      type: 'value',
      name: '日报数量'
    },
    series: [{
      data: Object.values(progressRanges),
      type: 'bar',
      itemStyle: {
        color: '#67c23a'
      }
    }]
  }
  
  chart.setOption(option)
}

// 心情统计图
const initMoodChart = () => {
  if (!moodChart.value) return
  
  const chart = echarts.init(moodChart.value)
  const moodCount: Record<string, number> = {}
  
  reports.value.forEach(report => {
    moodCount[report.mood] = (moodCount[report.mood] || 0) + 1
  })
  
  const moodLabels: Record<string, string> = {
    'excited': '兴奋 😄',
    'happy': '开心 😊',
    'normal': '一般 😐',
    'tired': '疲惫 😴',
    'sad': '难过 😢'
  }
  
  const data = Object.entries(moodCount).map(([mood, count]) => ({
    name: moodLabels[mood] || mood,
    value: count
  }))
  
  const option = {
    tooltip: {
      trigger: 'item'
    },
    series: [{
      type: 'pie',
      radius: ['40%', '70%'],
      data,
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }]
  }
  
  chart.setOption(option)
}

// 加载数据
const loadData = async () => {
  loading.value = true
  try {
    // 这里应该调用API加载日报数据
    // await reportStore.fetchReports()
    await new Promise(resolve => setTimeout(resolve, 500))
  } catch (error) {
    console.error('加载日报数据失败:', error)
    ElMessage.error('加载日报数据失败')
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  loadData()
})
</script>

<style scoped>
.report-list {
  padding: 0;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}

.header-left h1 {
  margin: 0 0 8px 0;
  font-size: 24px;
  color: #333;
}

.header-left p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.filter-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 16px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.filter-right {
  display: flex;
  gap: 12px;
}

.stats-section {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.stat-number {
  font-size: 28px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  color: #666;
}

.view-controls {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}

.reports-table {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.report-date {
  font-weight: 600;
  color: #409eff;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.work-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.content-preview {
  line-height: 1.4;
  color: #333;
}

.work-tags {
  display: flex;
  gap: 4px;
  align-items: center;
}

.more-tags {
  font-size: 12px;
  color: #999;
}

.work-hours {
  font-weight: 600;
  color: #67c23a;
}

.progress-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.progress-text {
  font-size: 12px;
  color: #666;
  text-align: center;
}

.mood-emoji {
  font-size: 20px;
}

.text-muted {
  color: #999;
  font-style: italic;
}

:deep(.report-row) {
  cursor: pointer;
}

:deep(.report-row:hover) {
  background-color: #f5f7fa;
}

.calendar-view {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.calendar-cell {
  height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 4px;
}

.date-number {
  font-weight: 500;
  margin-bottom: 4px;
}

.reports-indicator {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  align-items: center;
}

.report-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #409eff;
}

.more-reports {
  font-size: 10px;
  color: #666;
}

.chart-view {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.charts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.chart-card {
  border: 1px solid #ebeef5;
  border-radius: 8px;
  overflow: hidden;
}

.chart-header {
  padding: 12px 16px;
  border-bottom: 1px solid #ebeef5;
  background: #fafafa;
}

.chart-header h4 {
  margin: 0;
  font-size: 14px;
  color: #333;
}

.chart-content {
  height: 200px;
  padding: 16px;
}

.empty-state {
  text-align: center;
  padding: 60px 0;
}

.pagination {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .stats-section {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .charts-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  
  .filter-section {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  
  .filter-right {
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .stats-section {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .stats-section {
    grid-template-columns: 1fr;
  }
}
</style>